import React, { useEffect, useRef } from 'react'
import { SwipeCell, Button, Notify } from 'react-vant';
import { observer } from 'mobx-react-lite'
import dayjs from 'dayjs'
import { getContent, deleteContent } from '../../utils/storage'
import { contentStore } from '../../store/content'
import './index.scss'

function Home() {
    const myRef = useRef()
    let list = []
    //第一次进入页面获取数据渲染
    const loadlist = async () => {
        const list1 = []
        //获取本地存储的数据
        const Storage = getContent()
        for (let i of Object.keys(Storage)) {
            list1.push(JSON.parse(Storage[i]))
        }
        const today = `${dayjs(new Date()).$y}/${dayjs(new Date()).$M + 1}/${dayjs(new Date()).$D}` //当前日期
        for (let i of list1) {
            const day = dayjs(i.day)
            const days = `${day.$y}/${day.$M + 1}/${day.$D}` //文章的日期
            if (days === today) {  //进行日期比较，只有当日文章才会显示
                list.push(i)
            }
        }
    }
    loadlist()
    useEffect(() => {
        loadlist()
    }, [contentStore.changecount]) //监听数据的变化，每次存储数据都会重新获取一次数据
    
        //删除选中列表，改变changeCount数据重新获取数据
        const dele = (data) => {
            deleteContent(data)
            Notify.show('删除成功');
            contentStore.changeCount()
        }
    return (
        <div className='List'>
            {
                list.map((item) => {
                    return <SwipeCell
                        key={item.id}
                        rightAction={
                            <Button onClick={() => dele(item.id)} style={{ height: '100%' }} square type="danger">
                                删除
                            </Button>
                        }
                    >
                        <li>
                            {item.content}
                        </li>

                    </SwipeCell>
                })
            }

        </div>
    )
}
export default observer(Home)